<template>
  <div>
    <el-table :data="cardTable" style="width: 100%">
      <el-table-column label="卡种">
        <template slot-scope="scope">
          <span>{{scope.row.cardrace}}</span>
        </template>
      </el-table-column>
      <el-table-column label="卡类">
      <template slot-scope="scope">
        <span>{{scope.row.types}}</span>
      </template>
    </el-table-column>
      <el-table-column label="价格">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column label="描述">
        <template slot-scope="scope">
          <span>{{scope.row.describe}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "cardManage",
  data(){
    return{
      form:{
        cardrace:'',
        types:"",
        price:"",
        describe:"",
        img:"",
        total_num:0
      },
      cardTable:{},
      types:[],
      cardrace:[]
    }
  },
  mounted() {
    this.getCard();
  },
  methods:{
    deleteRow(index,row){
      console.log(index,row)
    },
    setTypes() {
      let types = [];
      for (let i = 0; i < this.cardTable.length; i++) {
        console.log(this.cardTable[i].types);
        types.push(this.cardTable[i].types)
      }
      var newArr = [];
      newArr = types.map(item => ({label: item, value: item}));
      this.types = newArr;
    },
    setCardrace() {
      let cardrace = [];
      for (let i = 0; i < this.cardTable.length; i++) {
        console.log(this.cardTable[i].cardrace);
        cardrace.push(this.cardTable[i].cardrace)
      }
      let newArr = [];
      newArr = cardrace.map(item => ({label: item, value: item}));
      this.cardrace = newArr;
    },
    getCard(){
      this.axios.get('/api/admin/getCard').then(res=>{
        console.log(res.data.data);
        this.cardTable = res.data.data;
        this.setTypes();
        this.setCardrace();
      }).catch(err=>{
        console.log(err)
      })
    },
    addCard(){
      this.axios.post('/api/admin/setCard',{
        ...this.form
      }).then(res=>{
        console.log(res);
        this.getCard();
      }).catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
</style>
